<template>
    <div class="wrappe-tab">
       
        
        <div class="tab">
            <ul>
                <li @click="goUnread">未读</li>
                <li @click="goread">已读</li>
                <li @click="gorecycle">回收站</li>
            </ul>
        </div>
      
        <div class="box">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        mounted() {
            
        },
        methods: {
            goUnread(){
                this.$router.push('/unread')
            },
            goread(){
                this.$router.push('/read')
            },
            gorecycle(){
                this.$router.push('/recycle')
            }
        },
    }
</script>

<style lang="scss" scoped>
.wrappe-tab{
    width: 100%;
    .tab{
        height: 20px;
        ul{
        list-style: none;
        li{
            float: left;
            margin-left: 20px;
        }
    }
        
    }
  
    .box{
        width: 100%;
        height: 500px;
        background: #ddd;
    }
}
</style>